<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="smohan">
	<meta name="homepage" content="https://smohan.im">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>MoCss - 水墨寒的博客</title>
	<link rel="stylesheet" href="../css/mo.css">
	<link rel="stylesheet" href="demo.css">	
</head>
<body>
	<article class="demo">
		<a class="demo-back mo-btn mo-btn-outline--primary mo-fluid" href="index.html">目录</a>
		<header class="demo-header">
			<h1>Mo-Button</h1>
			<p>
				<a href="http://www.kancloud.cn/smohan/mo-css/281483" target="_blank">buttons文档</a>
			</p>
		</header>
		<main class="demo-body">
			<section class="demo-section">
				<form class="demo-form" onsubmit="return false">
					<fieldset>
						<legend>default</legend>	
						<button class="mo-btn">default</button>
						<button class="mo-btn" disabled>default</button>
						<button class="mo-btn mo-radius">default</button>
						<button class="mo-btn mo-pill">default</button>
						<button class="mo-btn mo-btn--link">default</button>
					</fieldset>
					<fieldset>
						<legend>primary</legend>	
						<button class="mo-btn mo-btn--primary">primary</button>
						<button class="mo-btn mo-btn--primary" disabled>primary</button>
						<button class="mo-btn mo-btn--primary mo-radius">primary</button>
						<button class="mo-btn mo-btn--primary mo-pill">primary</button>
					</fieldset>	
					<fieldset>
						<legend>negative</legend>	
						<button class="mo-btn mo-btn--negative">negative</button>
						<button class="mo-btn mo-btn--negative" disabled>negative</button>
						<button class="mo-btn mo-btn--negative mo-radius">negative</button>
						<button class="mo-btn mo-btn--negative mo-pill">negative</button>
					</fieldset>	
					<fieldset>
						<legend>positive</legend>	
						<button class="mo-btn mo-btn--positive">positive</button>
						<button class="mo-btn mo-btn--positive" disabled>positive</button>
						<button class="mo-btn mo-btn--positive mo-radius">positive</button>
						<button class="mo-btn mo-btn--positive mo-pill">positive</button>
					</fieldset>	
					<fieldset>
						<legend>outline</legend>	
						<button class="mo-btn mo-btn-outline">outline</button>
						<button class="mo-btn mo-btn-outline--primary">outline</button>
						<button class="mo-btn mo-btn-outline--negative">outline</button>
						<button class="mo-btn mo-btn-outline--positive">outline</button>
					</fieldset>	
					<fieldset>
						<legend>small</legend>	
						<button class="mo-btn mo-btn--small">small</button>
						<button class="mo-btn mo-btn--small" disabled>small</button>
						<button class="mo-btn mo-btn--small mo-btn--outline">small</button>
						<button class="mo-btn mo-btn--small mo-radius">small</button>
						<button class="mo-btn mo-btn--small mo-pill">small</button>
						<button class="mo-btn mo-btn--small mo-btn--link">small</button>
						<br/>
						<br/>
						<button class="mo-btn mo-btn--small mo-btn--primary">small</button>
						<button class="mo-btn mo-btn--small mo-btn--primary" disabled>small</button>
						<button class="mo-btn mo-btn--small mo-btn-outline--primary">small</button>
						<button class="mo-btn mo-btn--small mo-btn--primary mo-button--radius">small</button>
						<button class="mo-btn mo-btn--small mo-btn--primary mo-button--pill">small</button>
						<br/>
						<br/>
						<button class="mo-btn mo-btn--small mo-btn--negative">small</button>
						<button class="mo-btn mo-btn--small mo-btn--negative" disabled>small</button>
						<button class="mo-btn mo-btn--small mo-btn-outline--negative">small</button>
						<button class="mo-btn mo-btn--small mo-btn--negative mo-radius">small</button>
						<button class="mo-btn mo-btn--small mo-btn--negative mo-pill">small</button>
						<br/>
						<br/>
						<button class="mo-btn mo-btn--small mo-btn--positive">small</button>
						<button class="mo-btn mo-btn--small mo-btn--positive" disabled>small</button>
						<button class="mo-btn mo-btn--small mo-btn-outline--positive">small</button>
						<button class="mo-btn mo-btn--small mo-btn--positive mo-radius">small</button>
						<button class="mo-btn mo-btn--small mo-btn--positive mo-pill">small</button>
					</fieldset>	
					<fieldset>
						<legend>large</legend>	
						<button class="mo-btn mo-btn--large">large</button>
						<button class="mo-btn mo-btn--large" disabled>large</button>
						<button class="mo-btn mo-btn--large mo-btn--outline">large</button>
						<button class="mo-btn mo-btn--large mo-radius">large</button>
						<button class="mo-btn mo-btn--large mo-pill">large</button>
						<button class="mo-btn mo-btn--large mo-btn--link">large</button>
						<br/>
						<br/>
						<button class="mo-btn mo-btn--large mo-btn--primary">large</button>
						<button class="mo-btn mo-btn--large mo-btn--primary" disabled>large</button>
						<button class="mo-btn mo-btn--large mo-btn-outline--primary">large</button>
						<button class="mo-btn mo-btn--large mo-btn--primary mo-button--radius">large</button>
						<button class="mo-btn mo-btn--large mo-btn--primary mo-button--pill">large</button>
						<br/>
						<br/>
						<button class="mo-btn mo-btn--large mo-btn--negative">large</button>
						<button class="mo-btn mo-btn--large mo-btn--negative" disabled>large</button>
						<button class="mo-btn mo-btn--large mo-btn-outline--negative">large</button>
						<button class="mo-btn mo-btn--large mo-btn--negative mo-radius">large</button>
						<button class="mo-btn mo-btn--large mo-btn--negative mo-pill">large</button>
						<br/>
						<br/>
						<button class="mo-btn mo-btn--large mo-btn--positive">large</button>
						<button class="mo-btn mo-btn--large mo-btn--positive" disabled>large</button>
						<button class="mo-btn mo-btn--large mo-btn-outline--positive">large</button>
						<button class="mo-btn mo-btn--large mo-btn--positive mo-radius">large</button>
						<button class="mo-btn mo-btn--large mo-btn--positive mo-pill">large</button>
					</fieldset>	
					<fieldset>
						<legend>fluid</legend>	
						<button class="mo-btn mo-fluid">fluid</button>
						<br/>
						<button class="mo-btn mo-btn--primary mo-fluid">fluid</button>
						<br/>
						<button class="mo-btn mo-btn--negative mo-fluid">fluid</button>
						<br/>
						<button class="mo-btn mo-btn--positive mo-fluid">fluid</button>
						<br/>
						<button class="mo-btn mo-btn--positive mo-radius mo-fluid">fluid</button>
						<br/>
						<button class="mo-btn mo-btn--positive mo-pill mo-fluid">fluid</button>
					</fieldset>	



				</form>	

			</section>
		</main>
	</article>

</body>
</html>